<template>
	<view class="page-body">
		<el-row :gutter="15">
			<el-form ref="form1" :model="form1" :rules="rules" size="medium" label-width="100px">
				<el-col :span="16">
					<el-form-item label="题库名称" prop="title">
						<el-input v-model="form1.title" placeholder="请输入题库名称" clearable :style="{width: '100%'}">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="所属分类" prop="category_id">
						<el-cascader v-model="form1.category_ids" :options="options"
							:props="{ value: '_id', label: 'name' }" clearable :style="{width: '100%'}"></el-cascader>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="封面" prop="thumb" required>
						<vk-data-input-file-select v-model="form1.thumb" placeholder="请选择图片" file-type="image">
						</vk-data-input-file-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="上架时间" prop="published_at">
						<el-date-picker type="datetime" v-model="form1.published_at" format="yyyy-MM-dd HH:mm:ss"
							value-format="yyyy-MM-dd HH:mm:ss" :style="{width: '100%'}" placeholder="请选择上架时间" clearable>
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="显示状态" prop="is_show">
						<el-select v-model="form1.is_show" placeholder="请选择显示状态" clearable :style="{width: '100%'}">
							<el-option v-for="(item, index) in is_showOptions" :key="index" :label="item.label"
								:value="item.value" :disabled="item.disabled"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="基础题库" prop="is_rec">
						<el-select v-model="form1.is_rec" placeholder="请选择是否为基础题库" clearable :style="{width: '100%'}">
							<el-option v-for="(item, index) in is_recOptions" :key="index" :label="item.label"
								:value="item.value" :disabled="item.disabled"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="简介" prop="short_description">
						<el-input v-model="form1.short_description" type="textarea" placeholder="请输入简介"
							:autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="详细介绍" prop="render_desc">
						<vk-data-input-editor v-model="form1.render_desc" placeholder="请输入详细介绍" width="100%">
						</vk-data-input-editor>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item size="large">
						<el-button type="primary" @click="submitForm">提交</el-button>
						<el-button @click="resetForm">重置</el-button>
					</el-form-item>
				</el-col>
			</el-form>
		</el-row>
	</view>
</template>
<script>
	var that; // 当前页面对象
	var vk = uni.vk; // vk实例
	export default {
		props: ['action', 'form-type', 'item'],
		components: {},
		data() {
			return {
				form1: {
					title: undefined,
					category_ids: [],
					thumb: null,
					charge: undefined,
					charge_original: 0,
					published_at: null,
					is_show: 1,
					is_rec: 0,
					comment_status: 1,
					short_description: undefined,
					render_desc: null,
				},
				rules: {
					title: [{
						required: true,
						message: '请输入课程标题',
						trigger: 'blur'
					}],
					charge: [{
						required: true,
						message: '请输入课程售价',
						trigger: 'blur'
					}],
					charge_original: [],
					published_at: [{
						required: true,
						message: '请选择上架时间',
						trigger: 'change'
					}],
					is_show: [{
						required: true,
						message: '请选择课程状态',
						trigger: 'change'
					}],
					is_rec: [{
						required: true,
						message: '请选择是否推荐',
						trigger: 'change'
					}],
					comment_status: [{
						required: true,
						message: '请选择评论开关',
						trigger: 'change'
					}],
					short_description: [{
						required: true,
						message: '请输入课程简介',
						trigger: 'blur'
					}],
					render_desc: [{
						required: true,
						message: '请输入详细介绍',
						trigger: 'blur'
					}],
				},
				is_showOptions: [{
					"label": "显示",
					"value": 1
				}, {
					"label": "隐藏",
					"value": 0
				}],
				is_recOptions: [{
					"label": "是",
					"value": 1
				}, {
					"label": "否",
					"value": 0
				}],
				comment_statusOptions: [{
					"label": "关闭评论",
					"value": 0
				}, {
					"label": "所有人",
					"value": 1
				}, {
					"label": "仅购买",
					"value": 2
				}],
				options: []
			}
		},
		//监听-页面每次【加载时】执行(如:前进)
		onLoad(options = {}) {},
		created() {
			that = this;
			vk = that.vk;
			if (this.formType == "update") {
				let obj = this.item
				obj.category_ids = []
				if (obj.category_parent_id &&
					obj.category_parent_id != obj.category_id) {
					obj.category_ids.push(obj.category_parent_id)
				}
				if (obj.category_id) obj.category_ids.push(obj.category_id)
				this.form1 = obj
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			//页面数据初始化函数
			init(options) {
				vk.callFunction({
					url: 'admin/video_course/category/sys/categories',
					title: '提交中...',
					success(data) {
						let obj = data.rows
						// 删除空children
						function fn(arr) {
							return arr.map((item, index) => {
								if (item.children.length > 0) {
									fn(item.children)
								} else {
									delete item.children
								}
								return item;
							})
						}
						that.options = fn(obj);
					}
				})
			},
			submitForm() {
				this.$refs['form1'].validate(valid => {
					if (!valid) return
					vk.callFunction({
						url: this.action,
						title: '提交中...',
						data: this.form1,
						success(data) {
							that.$emit("success")
						}
					});
				})
			},
			resetForm() {
				this.$refs['form1'].resetFields()
			}
		},
		// 监听器
		watch: {},
		// 过滤器
		filters: {},
		// 计算属性
		computed: {},
	}
</script>
<style lang="scss" scoped>
	.el-upload__tip {
		line-height: 1.2;
	}

	.page-body {
		max-width: 1200px !important;
		margin: 0 auto;
	}
</style>
